<!--
* @description 巡检点位详情
* @author xyjia
* @date 2022/01/11 10:31:54
!-->
<template>
  <div class="inspect-main inspect-main-detail">
    <van-nav-bar title="巡检点位详情" fixed left-arrow @click-left="onClickLeft" right-text="删除" @click-right="onClickRight"/>
    <img  :onerror="defaultImg" class="inspect-main-detail__topimage" :src="alldetailData.picUrl || require('../../assets/img/inspect/default-point.png')" alt="" @click="previewshow = !previewshow">
    <van-image-preview v-model="previewshow" :images="[alldetailData.picUrl] || [require('../../assets/img/inspect/default-point.png')]" />
    <div>基本信息</div>
    <van-field
        v-model="alldetailData.name"
        readonly
        class="inspect-main-detail__detailleft"
        label="点位名称"
        autosize
          rows="2"
          type="textarea"
      />
    <van-divider class="divoder_line"/>
    <van-field
        v-model="alldetailData.pointCode"
        readonly
        class="inspect-main-detail__detailleft"
        label="二维码编码"
        autosize
          rows="2"
          type="textarea"
      />
      <div style="display: flex; justify-content: center; align-items: center;">
        <img v-if="showImageurl" class="inspect-main-detail__QRimage" :src="QRImg" alt="">
      </div>
    <van-divider class="divoder_line"/>
    <van-field
        v-model="alldetailData.typeName"
        readonly
        class="inspect-main-detail__detailleft"
        label="点位类别"
        autosize
          rows="2"
          type="textarea"
      />
    <van-divider class="divoder_line"/>
    <!-- <div class="inspect-main-detail__detailleft">检查内容</div> -->
    <van-field
        readonly
        class="inspect-main-detail__detaijcnr"
        label="检查内容"
        autosize
          rows="2"
          type="textarea"
      />
    <point-type-detail v-if="visible" :dataInfo="detaildata.contents" style="margin-top: 0px"></point-type-detail>
    <van-divider class="divoder_line"/>
    <van-field
        v-model="alldetailData.orgName"
        readonly
        class="inspect-main-detail__detailleft"
        label="所属单位"
        autosize
          rows="2"
          type="textarea"
      />
    <van-divider class="divoder_line"/>
    <van-field
        readonly
        class="inspect-main-detail__detailleft"
        label="具体地址"
        autosize
          rows="1"
          type="textarea"
      />
    <p style="font-size: 14px">{{alldetailData.buildLevelName + (alldetailData.address.length!=0?'>'+alldetailData.address:alldetailData.address)}}</p>
    <van-divider class="divoder_line"/>
    <van-button class="buttonwithedit" block color="#2471CA" @click="jumpeditview">编辑</van-button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getOneInfo,delExaminePoint } from '@/api/examine'
import QRCode from 'qrcode'
import PointTypeDetail from '@/components/PointTypeDetail'
import { Dialog } from 'vant';
export default {
  data() {
    return {
      defaultImg: 'this.src="' + require('../../assets/img/inspect/default-point.png') + '"',
      visible: false,
      previewshow: false,
      showImageurl: false,
      QRImg: '',
      pointTypeId: '',
      detaildata: {},
      alldetailData: {},
    }
  },
  components: {PointTypeDetail},

  watch: {},

  computed: {
    ...mapState(['userInfo']),
  },
  created() {
    this.alldetailData = JSON.parse(this.$route.query.Data)
    this.getOneInfoData(this.alldetailData.pointTypeId)
    this.createQrcode()
  },
  mounted() {},
  methods: {
    onClickLeft() {
        this.$router.go(-1)
    },
    getOneInfoData(pointTypeId) {
      getOneInfo({pointTypeId:pointTypeId}).then((res)=>{
        this.detaildata = res.data
        if (this.detaildata.contents) {
          this.visible = true
        }
        
      })
    },
    createQrcode(){
      QRCode.toDataURL(this.alldetailData.pointCode ,{
          margin:3
        })
					.then((url) => {
           this.QRImg = url
           setTimeout(() => {
             this.showImageurl = true
           }, 200);
					})
					.catch((err) => {
						console.error(err)
					})
    },
    onClickRight() {
      let that = this
      Dialog.confirm({
        title: '提示',
        message: '是否确认删除该巡检点位？',
        beforeClose,
      });
      function beforeClose(action, done) {
        if (action === 'confirm') {
          // 删除接口
          delExaminePoint({id:that.alldetailData.id}).then((res)=>{
            if (res.status == 200) {
              setTimeout(done, 500);
              that.$toast(res.info)
              that.$router.go(-1)
            } else {
              setTimeout(done, 500);
              that.$toast(res.info)
            }
          })
          
        } else {
          done();
        }
      }
    },
    jumpeditview() {
      this.$router.push({
        name: 'InspectAllPointEdit',
        query: {
          detailData: JSON.stringify(this.alldetailData)
        },
      })
    }
  }
}
</script>
<style lang='scss'>
.inspect-main-detail {
  padding: 10px 15px;
  &__topimage {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
  }
  &__detailleft {
    margin-top: 20px;
    padding: 0px 0;
  }
  &__detaijcnr {
    margin-top: 20px;
    height: 35px;
    padding: 0px 0;
  }
  .divoder_line {
    margin: 0px 0;
  }
  &__QRimage {
    width: 129px;
    height: 123px;
  }
  .buttonwithedit {
    margin-top: 20px;
  }
}
</style>